<template>
	<view class="container">
		<uni-badge @click="urlUserInfomation" size="normal" :text="badgeText" absolute="rightTop" type="primary"
			class="msg" :customStyle="{background: 'red'}">
			<uni-icons@click="urlUserInfomation" type="notification" color="rgb(67,143,232)" size="25"></uni-icons>
		</uni-badge>
		<view class="" style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx ">
			<image @click="onChooseAvatar" class="avatar-wrapper"
				:src="userInfo.UserAvatarURL?userInfo.UserAvatarURL:userUrl" mode="aspectFit"></image>
			<text class="version">v {{vers}}</text>
		</view>
		<uni-list style="">
			<uni-list-item clickable @click="toEditUserInfo('账户名称')" showArrow title="账户名称"
				:rightText="userInfo.UserName" />
			<uni-list-item clickable @click="toEditUserInfo('手机号')" showArrow title="手机号"
				:rightText="userInfo.UserPhone" />
			<uni-list-item clickable @click="toEditUserInfo('公司')" showArrow title="公司/店铺"
				:rightText="CompanyInfo.Title" />
			<uni-list-item clickable @click="feedback" showArrow title="留言反馈" />
			<uni-list-item clickable @click="appprivacy(0)" showArrow title="隐私政策" />
			<uni-list-item clickable @click="appprivacy(1)" showArrow title="服务协议" />
			<uni-list-item clickable @click="cancellation" showArrow title="注销账号" />

		</uni-list>
		<button style="margin-top: 40px;" type="warn" @click="logOut">退 出 登 录</button>

		<!-- 小票短语 -->
		<uni-popup ref="ReceiptPhrasePopup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="小票短语" :duration="2000" :before-close="true"
				@close="ReceiptPhraseClose" @confirm="ReceiptPhraseConfirm" :value="printKewords"
				placeholder="请输入小票短语"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	// 引入下拉多选
	import multiple from '@/components/multiple-picker/multiple-picker.vue'
	export default {
		components: {
			multiple
		},
		data() {
			return {
				// 消息条数
				badgeText: 0,
				// 打印小票弹窗输入的内容
				printKewords: "",
				// 催款备注输入的内容
				callForPayKewords: "",
				// 是否显示下拉多选组件
				userSelectMultiple: false,
				rules: {},
				formData: {},
				userInfo: {},
				userUrl: 'https://hzq.yoojet.com/logo200.png',
				CompanyInfo: {},
				vers: '1.0.0',
			}
		},
		onLoad() {

		},
		onShow() {
			//清楚查询页面条件缓存
			uni.removeStorageSync('CollectMoneySearch')
			uni.removeStorageSync('indexSearchQueryValue')
			// 获取小票备注
			this.printKewords = uni.getStorageSync('ReceiptPhrase')
			// 获取催款备注
			this.callForPayKewords = uni.getStorageSync('callForPayRemart')
			this.CommpayInfo = uni.getStorageSync('CompanyInfo')
			this.userInfo = uni.getStorageSync('userInfo')
			this.getCompanyInfo()
			// 获取消息条数
			this.getUnreadCount()
			// #ifdef APP-PLUS
			this.vers = plus.runtime.version
			// #endif
			// 获取 用户信息
			this.getTheData()

		},
		methods: {
			// 获取 用户信息详情
			getTheData() {
				let id = uni.getStorageSync('userInfo').Id
				this.$http('post', '/Base_Manage/Base_User/GetTheData', {
						id: id
					})
					.then((res) => {
						if (res.Success) {
							console.log('获取用户详情信息', res)
							if (res.Data) this.userInfo = res.Data
						} else {
							uni.showToast({
								title: res.Msg,
								icon: "none"
							})
						}
					})
			},
			ChargeCode() {
				uni.navigateTo({
					url: '/pages/user/ChargeCode'
				})
			},
			// 获取消息条数
			getUnreadCount() {
				console.log('消息获取公司信息', this.CommpayInfo.Id)
				this.$http('post', '/Base/Base_Message/GetUnreadCount', {
					UserId: this.userInfo.Id
				}).then(res => {
					if (res.Success) {
						console.log('获取消息条数', res)
						if (res.Success) {
							this.badgeText = res.Data
						}
					} else this.$api.msg(res.Msg)
				})
			},
			// 消息
			urlUserInfomation() {
				uni.navigateTo({
					url: '/pages/news/news'
				})
			},
			//隐私政策/服务协议
			appprivacy(val) {
				// alert(val);return
				uni.navigateTo({
					url: '/pages/user/customerPage?Type=' + val
				})

			},
			// 留言反馈
			feedback() {
				uni.navigateTo({
					url: '/pages/user/feedback'
				})
			},
			// 注销
			cancellation() {
				uni.navigateTo({
					url: '/pages/user/cancellation'
				})
			},
			// 小票备注点击事件
			printKewordsClick() {
				console.log('点击小票备注了')
				this.$refs.ReceiptPhrasePopup.open()
			},
			// 小票短语取消
			ReceiptPhraseClose() {
				this.$refs.ReceiptPhrasePopup.close()
			},
			// 小票短语确定
			ReceiptPhraseConfirm(e) {
				console.log('输入的东西是', e)
				uni.setStorageSync('ReceiptPhrase', e)
				this.printKewords = e
				// 关闭小票备注弹窗
				this.$refs.ReceiptPhrasePopup.close()
			},

			// 删除行业
			handleRemove(item) {
				console.log('删除行业', item)
				this.$http("post", "/BO/Industry_Company/DeleteIndustry?Id=" + item.Id + '&CommpayId=' + this.CompanyInfo
						.Id)
					.then((res) => {
						if (res.Success) {
							console.log('获取删除后的行业标签', res.Data);
							this.getInventListData()
						} else {
							this.$api.msg(res.Msg)
						}
					});
			},

			// 选择行业
			selectInventypeChange() {
				if (this.userInfo.IsSubAccount) return this.$api.msg('暂无权限')
				if (!this.CompanyInfo) {
					this.$api.msg('请先添加公司/店铺！')
					return
				}
				uni.navigateTo({
					url: '/pages/Inventype/Inventype'
				})
			},
			// 获取公司信息
			getCompanyInfo() {
				this.$http("post", "/Base_Manage/Base_Company/GetDataCompanyData", {
						Search: {
							condition: "CreatorId",
							keyword: this.userInfo.Id,
						},
					})
					.then((res) => {
						console.log(res);
						if (res.Success && res.Data.length > 0) {
							this.CompanyInfo = res.Data[0];
							uni.setStorageSync('CompanyInfo', this.CompanyInfo)
							this.getInventListData()
						}
					});
			},
			// 修改个人信息
			toEditUserInfo(type) {
				let url = ''
				console.log('哪个类型', type, url = `type=number&value=${this.userInfo.UserPhone||''}&key=UserPhone&title=手机号`)

				if (type == '账户名称') url = `type=text&value=${this.userInfo.UserName||''}&key=UserName&title=账户名称`
				else if (type == '手机号') url = `type=number&value=${this.userInfo.UserPhone||''}&key=UserPhone&title=手机号`
				else if (type == '公司') {
					if (this.userInfo.IsSubAccount) return this.$api.msg('暂无权限')
					let cId = this.CompanyInfo.Id ? this.CompanyInfo.Id : ''
					uni.navigateTo({
						url: '/pages/user/company?Id=' + cId
					})
					return
				} else if (type == '小票备注') url = `type=text&value=${this.printKewords||''}&key=printKewords&title=小票备注`
				else url = `title=催款备注`
				uni.navigateTo({
					url: '/pages/user/editUserInfo?' + url
				})
			},
			logOut() {
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('CompanyInfo')
				uni.removeStorageSync('pass')
				uni.removeStorageSync('agree')
				uni.reLaunch({
					url: '/pages/Login/Login'
				})
			},
			// 用户头像
			onChooseAvatar(e) {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (rst) => {
						uni.navigateTo({
							url: '/pages/user/camera?path=' + encodeURIComponent(rst
								.tempFilePaths[0])
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.uni-list-item__extra-text {
		max-width: 250px;
	}

	::v-deep.uni-list-item__container {
		align-items: center;
	}

	.msg {
		position: absolute;
		right: 25px;
		top: 10px;
	}

	.version {
		// position: fixed;
		// bottom: 20rpx;
		width: 100vw;
		text-align: center;
		color: #bab8b8;
	}

	.avatar-wrapper {
		border: 1px solid red;
		margin: 10px 0 0 10px;
		border: none;
		background-color: transparent;
		width: 100px;
		height: 100px;
		padding: 0;
		border-radius: 5px;
		// border: 1px solid #ccc;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.container {
		.codeImg {
			width: 20px;
			height: 20px;
			vertical-align: bottom;
		}

		.item {
			.uni-select-multiple-item {
				background: #438FE8;
				margin-right: 5px;
				padding: 2px 4px;
				border-radius: 4px;
				color: #909399;
				display: flex;
				font-size: 28rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;

				/* 删除按钮样式*/
				.close-icon {
					height: 100%;
					width: 20px;
					display: flex;
					align-items: center;
					justify-content: center;
					z-index: 3;
					cursor: pointer;

					text {
						position: relative;
						background: #fff;
						width: 13px;
						height: 13px;
						border-radius: 50%;
						border: 1px solid #bbb;

						&::before,
						&::after {
							content: '';
							position: absolute;
							left: 20%;
							top: 50%;
							height: 1px;
							width: 60%;
							transform: rotate(45deg);
							background-color: #909399;
						}

						&::after {
							transform: rotate(-45deg);
						}
					}
				}
			}
		}
	}
</style>